<template>
  <div class="class-list">
    <!--工具条-->
    <el-form ref="form" label-width="80px" inline>
      <el-form-item label="班级列表">
        <el-button
          style="color: #fff; background-color: #586cb1; border-color: #586cb1"
          size="mini"
          @click="openDialog"
          >添加班级</el-button
        >
      </el-form-item>
    </el-form>
    <!--数据表格-->
    <div class="class-list__content">
      <el-table
        :header-cell-style="{ background: '#ececf1', color: '#636870' }"
        :data="classList"
        border
      >
        <el-table-column prop="name" label="班级名称" />
        <el-table-column prop="master_name" label="班主任" />
        <el-table-column prop="student" sortable label="在读学生人数" />
        <el-table-column prop="note" label="所属专业" />
        <el-table-column label="操作" width="200">
          <template v-slot="{ row }">
            <el-button
              style="color: #586cb1"
              type="text"
              @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button
              style="color: #586cb1"
              type="text"
              @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加/编辑对话框-->
    <el-dialog
      :title="classInfo.id ? '编辑班级' : '添加班级'"
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="classInfo" label-width="80px" :rules="rules">
        <el-form-item label="班级名称" prop="name">
          <el-input
            v-model="classInfo.name"
            clearable
            placeholder="班级的名字"
          />
        </el-form-item>
        <el-form-item label="班主任" prop="master_id">
          <el-select
            v-model="classInfo.master_id"
            clearable
            placeholder="请选择班主任"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select
            v-model="college_id"
            @change="handleMajorChange"
            placeholder="请选择学院"
          >
            <el-option
              v-for="item in collegeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="note">
          <el-select v-model="classInfo.note" placeholder="请选择专业">
            <el-option
              v-for="item in majorList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="班级备注">
          <el-input
            v-model="classInfo.note"
            type="textarea"
            :rows="2"
            clearable
            placeholder="请输入备注"
          />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="background-color: white; border-color: #586cb1; color: #586cb1"
          @click="handleClose"
          >取 消</el-button
        >
        <el-button
          style="color: #fff; background-color: #586cb1; border-color: #586cb1"
          @click="handleAddOrUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import teacherApi from "@/api/teacher";
import classApi from "@/api/class";
import _ from "lodash";
import { getCollegeList } from "@/api/college";
import { getMajorListByCollegeId } from "@/api/major";

export default {
  name: "ClassList",
  data() {
    return {
      classInfo: {
        name: "",
        master_id: null,
        note: "",
        master_name: "",
      },
      college_id: null,
      //major_id: null,
      teacherList: [],
      // 学院列表
      collegeList: [],
      majorList: [],
      dialogVisible: false,
      // 表单验证
      rules: {
        name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
        master_id: [
          { required: true, message: "请选择班主任", trigger: "blur" },
        ],
        note: [{ required: true, message: "请选择专业", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState("classL", ["classList"]),
  },
  mounted() {
    if (this.$route.params.id) {
      this.getStudentInfo();
    }
    // 获取学院列表
    this.getCollegeList();
    // 获取班级列表
    this.$store.dispatch("classL/getClassList");
    this.getTeacherList();
  },
  methods: {
    // 获取学院列表
    getCollegeList() {
      getCollegeList()
        .then((res) => {
          this.collegeList = res.data;
        })
        .catch();
    },
    // 获取专业列表
    getMajorList() {
      getMajorListByCollegeId(this.college_id)
        .then((res) => {
          this.majorList = res.data;
        })
        .catch();
    },
    // 学院选择器回调
    handleMajorChange() {
      //this.major_id = "";
      this.classInfo.note = "";
      this.getMajorList();
    },
    // 获取教师列表
    getTeacherList() {
      teacherApi.getTeacherList().then((res) => {
        this.teacherList = res.data;
      });
    },
    // 打开对话框
    openDialog() {
      //清空表单
      this.classInfo = {
        name: "",
        master_id: null,
        note: "",
        master_name: "",
      };
      this.dialogVisible = true;
      // 清除表单验证上次的错误信息
      this.$refs.form.clearValidate();
      this.college_id = "";
    },
    // 编辑班级
    handleEdit(row) {
      this.dialogVisible = true;
      this.classInfo = _.cloneDeep(row);
      // 清除表单验证上次的错误信息
      this.$refs.form.clearValidate();

      let newNote = this.classInfo.note.split("-");
      let collegeId = this.collegeList.find((item) => {
        return newNote[0] == item.name;
      });
      this.college_id = collegeId.id;
      this.classInfo.note = newNote[1];
      //重新获取专业
      this.getMajorList();
    },
    // 弹出框确定按钮
    handleAddOrUpdate() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.classInfo.id ? this.updateClass() : this.addClass();
          this.handleClose();
        }
      });
    },
    // 添加班级
    addClass() {
      let collegeName = this.collegeList.find((item) => {
        return this.college_id == item.id;
      });
      this.classInfo.note = collegeName.name + "-" + this.classInfo.note;
      this.dialogVisible = false;
      // 添加老师名称字段
      this.classInfo.master_name = this.teacherList.find(
        (item) => item.id === this.classInfo.master_id
      ).name;
      classApi.addClass(this.classInfo).then((res) => {
        this.$message.success(res.msg);
        this.$store.dispatch("classL/getClassList");
      });
    },
    // 更新班级
    updateClass() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let collegeName = this.collegeList.find((item) => {
            return this.college_id == item.id;
          });
          this.classInfo.note = collegeName.name + "-" + this.classInfo.note;
          this.dialogVisible = false;
          // 添加老师名称字段
          this.classInfo.master_name = this.teacherList.find(
            (item) => item.id === this.classInfo.master_id
          ).name;
          classApi.updateClass(this.classInfo).then((res) => {
            this.$message.success(res.msg);
            this.$store.dispatch("classL/getClassList");
          });
        }
      });
    },
    // 删除班级
    handleDelete(row) {
      this.$confirm("此操作将永久删除该班级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          classApi.deleteClass(row.id).then((res) => {
            this.$message.success(res.msg);
            this.$store.dispatch("classL/getClassList");
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 窗口关闭
    handleClose() {
      this.dialogVisible = false;
      
      // this.classInfo.id = ""
    },
  },
};
</script>

<style scoped>
.class-list {
  padding: 20px;
}

/*
  el-table样式穿透 表格居中
*/
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
</style>
